<template>
    <div class="home">
        <div class="aboveBox">
            <div class="title">《{{ guideinfomation.guide_name }}》</div>
            <div style="display: flex;justify-content: center;">
                <div class="time">创建时间：{{ guideinfomation.guide_createtime }}</div>
                <div class="createname" @click="anthor()">作者：{{ guideinfomation.guide_createname }}</div>
            </div>
            <el-divider></el-divider>
        </div>
        <div class="belowBox">
            <div class="info">&emsp;&emsp;{{ guideinfomation.guide_information }}</div>
            <div style="width: 90%;margin: 5px auto;" v-for="item in guideinfomation.guide_img" :key="item">
                <el-image :src="item" style="width: 100%;" lazy></el-image>
            </div>
        </div>

        <el-backtop :right="60" :bottom="100" />
    </div>
</template>

<script>
import api from '@/api'
export default {
    data() {
        return {
            pageIndex: 1,
            pageSize: 10,
            total: 10,
            guideID: '',
            guideinfo: false,
            guideinfomation: [],

        };
    },
    /**在页面挂载前拿到id */
    beforeMount() {
        this.guideID = localStorage.guideid
        if (this.guideID) {
            this.guideinfo = true;
        }
    },
    /**在页面跳转后清除id */
    beforeRouteLeave(to, from, next) {
        localStorage.removeItem('guideid')
        next();
    },
    mounted() {
        if (this.guideinfo) {
            this.getGuideList()
        }
    },
    methods: {
        async getGuideList() {
            if (this.guideinfo) {
                let res = await api.findGuideByID({ _id: this.guideID })
                if (res?.code == 200) {
                    this.guideinfomation = res.data;
                }
            }
        },
        anthor() {
            localStorage.antorid = this.guideinfomation.guide_createid
            this.$router.push({
                path: '/allworks'
            })
        }
    }
};
</script>

<style scoped>
.home {
    width: 100%;
    height: 100vh;
}

.aboveBox {
    width: 100%;
    margin: 10px 0;

}

.belowBox {
    width: 80%;
    height: 80%;
    margin: 10px auto;
    background-color: #ddd;
    border-radius: 20px;
    padding: 10px;
    overflow-y: scroll;
}

.info {
    margin: 10px auto;
    width: 90%;
    font-size: 23px;
}

.belowBox::-webkit-scrollbar {
    display: none;
}

.title {
    padding: 20px 20px 0;
    width: 80%;
    margin: 10px auto 0;
    font-size: 32px;
    text-align: center;
}

.time {
    margin: 10px 20px 0px;
}

.createname {
    margin: 10px 20px 0px;
}
</style>